<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>移动穷游网</title>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
		<script src="./js/jq3.6.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="css/init.css"/>
	</head>
	<body style="overflow-x:hidden;">
		<!-- 顶部 -->
		<header class="header">
			<div class="header_logo">
				
			</div>
			<div class="header_search">
				<input class="header_input" type="text" placeholder="搜索目的地 游记攻略等"/>
			</div>
			<div class="header_user">
				
			</div>
		</header>
		<!-- 轮播 -->
		<section class="swiper" id="swiper">
			
			
		</section>
		<script  type="text/javascript">
			
			
			
			// 1模拟我们通过ajax异步请求得到数据
			    var swiper_data = {
			        autoplay: true, //自动播放
			        loop: true, //循环
			        interval: 3000, //切换间隔
			        data: [
			            {
			                href: "http://www.baidu.com",
			                url:"./img/swiper01.jpg"
			            },
			            {
			                href: "http://www.sina.com",
			                url:"./img/swiper02.jpg"
			            },
			            {
			                href: "http://www.sohu.com",
			                url:"./img/swiper03.jpg"
			            }
			        ]
			    }
				
				var sw=$("#swiper")
				
				
				var count=swiper_data.data.length
				
				
				// 动态生成一个不渲染的元素                    小点
				var swic = $("<div class=\"swiper_icons\"></div>")
				for(var i=1;i<=count;i++){
					// 追加元素
					sw.append('<div class=\"swiper_item\"></div>')
					 // 给追元素增加css样式 背景图
					$("#swiper .swiper_item:last-of-type").css({"background-image": "url(./img/swiper"+i+".jpg)"})
					if(i == 1){
					    $("#swiper .swiper_item:last-of-type").css({"top": "0","left":"0"})
					}else{
					    $("#swiper .swiper_item:last-of-type").css({"top": "0","left":"100%"})
					}
					// 追加标记元素
					swic.append('<div class=\"swiper_icons_item\"></div>')
					
				}
				// 追加完轮播图内容之后再追加标记符
				sw.append(swic)
				
				
				// 3添加定时切换
				var j=1;
				var k=2;
				setInterval(function(){
					//定时动作
					
					//找到显示元素
					$(".swiper_item:nth-of-type("+j+")").animate({"top":"0","left":"-100%"},500)
					$(".swiper_item:nth-of-type("+j+")").animate({"top":"0","left":"100%"},1)
					$(".swiper_item:nth-of-type("+k+")").animate({"top":"0","left":"0%"},500)
					j++
					k=j+1
					if(j>count){
						j=1
						k=2
					}
					if(k>count){
						k=1
					}
					console.log(j,"------",k)
				},swiper_data.interval)
				
		</script>
		<!-- 导航 -->
		<nav class="nav">
			<ul class="nav_ul">
				<li class="nav_li">
					<a class="nav_a" href="#">
						<img class="nav_img" src="./img/1.png"></img>
						<div class="nav_div">
							锦囊
						</div>
					</a>
				</li>
				<li class="nav_li">
					<a class="nav_a" href="#">
						<img class="nav_img" src="./img/2.png"></img>
						<div class="nav_div">
							行程助手
						</div>
					</a>
				</li>
				<li class="nav_li">
					<a class="nav_a" href="#">
						<img class="nav_img" src="./img/3.png"></img>
						<div class="nav_div">
							游记
						</div>
					</a>
				</li>
				<li class="nav_li">
					<a class="nav_a" href="#">
						<img class="nav_img" src="./img/4.png"></img>
						<div class="nav_div">
							Biu
						</div>
					</a>
				</li>
				<li class="nav_li">
					<a class="nav_a" href="#">
						<img class="nav_img" src="./img/5.png"></img>
						<div class="nav_div">
							问答
						</div>
					</a>
				</li>
				<li class="nav_li">
					<a class="nav_a" href="#">
						<img class="nav_img" src="./img/6.png"></img>
						<div class="nav_div">
							目的地
						</div>
					</a>
				</li>
				<li class="nav_li">
					<a class="nav_a" href="#">
						<img class="nav_img" src="./img/7.png"></img>
						<div class="nav_div">
							酒店
						</div>
					</a>
				</li>
				<li class="nav_li">
					<a class="nav_a" href="#">
						<img class="nav_img" src="./img/8.png"></img>
						<div class="nav_div">
							商城
						</div>
					</a>
				</li>
				<li class="nav_li">
					<a class="nav_a" href="#">
						<img class="nav_img" src="./img/9.png"></img>
						<div class="nav_div">
							约伴
						</div>
					</a>
				</li>
				<li class="nav_li">
					<a class="nav_a" href="#">
						<img class="nav_img" src="./img/10.png"></img>
						<div class="nav_div">
							专栏
						</div>
					</a>
				</li>
			</ul>
			
		</nav>
		<!-- 折扣 -->
		<section class="offsale">
			<p class="offsale_p">主打折扣</pa>
			<div class="offsale_div">
				<a class="offsale_item" href="#">
						<img class="offsale_img" src="img/offsale1.jpg" >
						<p class="offsale_p1">上海南京杭州无锡武汉直飞三亚海口博鳌5-12天往返含税（送行李额+赠保险+出行礼包+虹桥/浦东可选+行李额+代订三亚亚特兰蒂斯酒店）</p>
						<p class="offsale_p2"><em>1190</em>元起</p>
				</a>
				<a class="offsale_item" href="#">
						<img class="offsale_img" src="img/offsale1.jpg" >
						<p class="offsale_p1">上海南京杭州无锡武汉直飞三亚海口博鳌5-12天往返含税（送行李额+赠保险+出行礼包+虹桥/浦东可选+行李额+代订三亚亚特兰蒂斯酒店）</p>
						<p class="offsale_p2"><em>1190</em>元起</p>
				</a>
				<a class="offsale_item" href="#">
						<img class="offsale_img" src="img/offsale1.jpg" >
						<p class="offsale_p1">上海南京杭州无锡武汉直飞三亚海口博鳌5-12天往返含税（送行李额+赠保险+出行礼包+虹桥/浦东可选+行李额+代订三亚亚特兰蒂斯酒店）</p>
						<p class="offsale_p2"><em>1190</em>元起</p>
				</a>
				<a class="offsale_item" href="#">
						<img class="offsale_img" src="img/offsale1.jpg" >
						<p class="offsale_p1">上海南京杭州无锡武汉直飞三亚海口博鳌5-12天往返含税（送行李额+赠保险+出行礼包+虹桥/浦东可选+行李额+代订三亚亚特兰蒂斯酒店）</p>
						<p class="offsale_p2"><em>1190</em>元起</p>
				</a>
				<div class="offsale_one">
					<a class="offsale_one_a" href="#"></a>
				</div>
			</div>
		</section>
		<!-- 精选玩乐 -->
		<section class="play">
			<p class="play_p">精选玩乐</p>
			<ul class="play_ul">
				<li class="play_li">
					<div class="play_div">
						<a class="play_a" href="#">
							<span class="play_span">特价机票</span>
							<img src="img/play1.png" >
						</a>
					</div>
					
				</li>
				<li class="play_li">
					<div class="play_div">
						<a class="play_a" href="#">
							<span class="play_span">机车自由行</span>
							<img src="img/play2.png" >
						</a>
					</div>
				</li>
				<li class="play_li">
					<div class="play_div">
						<a class="play_a" href="#">
							<span class="play_span">当地玩乐</span>
							<img src="img/play3.png" >
						</a>
					</div>
				</li>
				<li class="play_li">
					<div class="play_div">
						<a class="play_a" href="#">
							<span class="play_span">门票/票券</span>
							<img src="img/play4.png" >
						</a>
					</div>
				</li>
				<li class="play_li">
					<div class="play_div">
						<a class="play_a" href="#">
							<span class="play_span">日本高铁</span>
							<img src="img/play5.png" >
						</a>
					</div>
				</li>
				<li class="play_li">
					<div class="play_div">
						<a class="play_a" href="#">
							<span class="play_span">WiFi电话卡</span>
							<img src="img/play6.png" >
						</a>
					</div>
				</li>
				<li class="play_li">
					<div class="play_div">
						<a class="play_a" href="#">
							<span class="play_span">欧铁频道</span>
							<img src="img/play7.png" >
						</a>
					</div>
				</li>
				<li class="play_li">
					<div class="play_div">
						<a class="play_a" href="#">
							<span class="play_span">保险频道</span>
							<img src="img/play8.png" >
						</a>
					</div>
				</li>
				<li class="play_li">
					<div class="play_div">
						<a class="play_a" href="#">
							<span class="play_span">接送机/包车</span>
							<img src="img/play9.png" >
						</a>
					</div>
				</li>
			</ul>
		</section>
		<!-- 攻略 -->
		<section class="plans">
			<div class="plans_item">
				<img class="plans_img" src="img/plans1.jpg" >
				<p class="plans_span">甘南自驾攻略｜🚗国内超小众避暑好去处！🚗</p>
				<div class="plans-div">
					<div class="plans_left">
						<img class="plans_user" src="img/deng.jpg" >
						<a class="plans_name">邓润通</a>
					</div>
					<div class="plans_right">
						<span class="plans_zan">❤    199</span>
					</div>
					
				</div>
			</div>
			
			<div class="plans_item">
				<img class="plans_img" src="img/deng2.jpg" >
				<p class="plans_span">Boy with stinky mouth｜🚗I love philosophy！🚗</p>
				<div class="plans-div">
					<div class="plans_left">
						<img class="plans_user" src="img/deng.jpg" >
						<a class="plans_name">邓润通</a>
					</div>
					<div class="plans_right">
						<span class="plans_zan">❤    199</span>
					</div>
					
				</div>
			</div>
			
			<div class="plans_item">
				<img class="plans_img" src="img/deng1.png" >
				<p class="plans_span">Boy with stinky mouth｜🚗i am  so so so cool！🚗</p>
				<div class="plans-div">
					<div class="plans_left">
						<img class="plans_user" src="img/deng.jpg" >
						<a class="plans_name">邓润通</a>
					</div>
					<div class="plans_right">
						<span class="plans_zan">❤    199</span>
					</div>
					
				</div>
			</div>
			
			<div class="plans_item">
				<img class="plans_img" src="img/deng3.jpg" >
				<p class="plans_span">Boy with stinky mouth｜🚗哟干饭被发现了！🚗</p>
				<div class="plans-div">
					<div class="plans_left">
						<img class="plans_user" src="img/deng.jpg" >
						<a class="plans_name">邓润通</a>
					</div>
					<div class="plans_right">
						<span class="plans_zan">❤    199</span>
					</div>
					
				</div>
			</div>
			
			<div class="plans_item">
				<img class="plans_img" src="img/deng4.jpg" >
				<p class="plans_span">Boy with stinky mouth｜🚗谁在叫我！🚗</p>
				<div class="plans-div">
					<div class="plans_left">
						<img class="plans_user" src="img/deng.jpg" >
						<a class="plans_name">邓润通</a>
					</div>
					<div class="plans_right">
						<span class="plans_zan">❤    199</span>
					</div>
					
				</div>
			</div>
			
			<div class="plans_item">
				<img class="plans_img" src="img/deng5.jpg" >
				<p class="plans_span">Boy with stinky mouth｜🚗我连中了两瓶饮料！🚗</p>
				<div class="plans-div">
					<div class="plans_left">
						<img class="plans_user" src="img/deng.jpg" >
						<a class="plans_name">邓润通</a>
					</div>
					<div class="plans_right">
						<span class="plans_zan">❤    199</span>
					</div>
					
				</div>
			</div>
			
			<div class="plans_item">
				<img class="plans_img" src="img/deng6.jpg" >
				<p class="plans_span">Boy with stinky mouth｜🚗国内超小众男头！🚗</p>
				<div class="plans-div">
					<div class="plans_left">
						<img class="plans_user" src="img/deng.jpg" >
						<a class="plans_name">邓润通</a>
					</div>
					<div class="plans_right">
						<span class="plans_zan">❤    199</span>
					</div>
					
				</div>
			</div>
			
			<div class="plans_item">
				<img class="plans_img" src="img/deng.jpg" >
				<p class="plans_span">>Boy with stinky mouth｜🚗我是帅哥！🚗</p>
				<div class="plans-div">
					<div class="plans_left">
						<img class="plans_user" src="img/deng.jpg" >
						<a class="plans_name">腿儿</a>
					</div>
					<div class="plans_right">
						<span class="plans_zan">❤    199</span>
					</div>
					
				</div>
			</div>
		</section>
		<!-- 尾部 -->
		<footer class="footer">
			<div class="footer_div">
				<a class="footer_a" href="#">手机版</a>
				<a class="footer_a" href="#">电脑版</a>
				<a class="footer_a" href="#">APP</a>
				<a class="footer_a" href="#">信息反馈</a>
			</div>
			<p class="footer_p">2004-2021 ©北京穷游天下科技发展有限公司&trade;<br/>京ICP备12003524号&nbsp;|&nbsp;电话 010 64554669</p>
			
		</footer>
		<!-- ads -->
		<div class="ad1" id="ad1"></div>
		<div class="ad2" id="ad2">
			<img class="ad2_img" src="img/ad2.png" >
			<div class="ad2_close" id="ad2_close">
				<!-- <div style="position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto; width: 75%;height: 3%;background-color: #f0f0f0;"></div>
				<div style="position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto; width: 3%;height: 75%;background-color: #f0f0f0;"></div> -->
			</div>
		</div>
		<script type="text/javascript">
		    // 切换的原理 判断页面滚动的高度就行
		    $(window).scroll(function(e){
		        // console.log($(window).height())
		        // console.log($(document).height())
		        // console.log($(document).scrollTop())
		        
		        if($(document).scrollTop() >= 150){
		            // $("#ad1").hide()
		            $("#ad2").show()
		        }else{
		            $("#ad1").show()
		            $("#ad2").hide()
		        }
		        
		    })
			$("#ad2_close").on('click',function(){
				// 点击删除ad2广告
				$("#ad2").remove();  
				
			})
			
			// 回到首页
			$("#ad1").on('click',function(){
			    $('body,html').animate({
			        scrollTop:0
			    },500);
			    return false;
			})
		</script>
	</body>
</html>
